<template>
  <div>
    <!-- 搜索区域 -->
    <van-search
      v-model.lazy="value"
      placeholder="请输入搜索关键词"
      @input="inputFn"
    />
    <!-- 热搜关键词 -->
    <div class="search-box">
      <template v-if="resultList.length === 0">
        <p class="hot-title">热门搜索</p>
        <div class="hot-name">
          <span
            class="hot-item"
            v-for="(obj, index) in hotWords"
            :key="index"
            @click="wordsSearch(obj.first)"
          >
            {{ obj.first }}
          </span>
        </div>

        <!-- 搜索历史记录 -->
        <p class="hot-title">搜索历史</p>
        <div class="hot-name">
          <span
            class="hot-item"
            v-for="(obj, index) in searchHis"
            :key="index"
            @click="wordsSearch(obj)"
          >
            {{ obj }}
          </span>
        </div>
      </template>
      <template v-else>
        <p class="hot-title">最佳匹配</p>
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="loadResult"
        >
          <SongItem
            v-for="obj in resultList"
            :key="obj.id"
            :name="obj.name"
            :artName="obj.ar[0].name"
            :songId="obj.id"
            :albUrl="obj.al.picUrl"
          ></SongItem>
        </van-list>
      </template>
    </div>
  </div>
</template>

<script>
import { getHotWords, getSearchRes } from "@/server/api/SearchApi.js";
import { Debounce } from "@/utils/Debounce.js";
import SongItem from "@/components/SongItem.vue";
// 引入mapState
export default {
  components: {
    SongItem,
  },
  data() {
    return {
      // 输入的内容
      value: "",
      resultList: [],
      // 热搜关键词列表
      hotWords: [],
      // 当前页码
      pageNum: 1,
      // 当前是否正在加载
      loading: false,
      // 是否加载完成
      finished: false,
      // 搜索历史
      searchHis: this.getHistoryFromStorage(),
    };
  },
  methods: {
    // 搜索结果
    async searchMusic() {
      console.log("searchMusic");
      return await getSearchRes({
        keywords: this.value,
        limit: 20,
        offset: (this.pageNum - 1) * 20,
      });
    },
    // 通过热搜关键词搜索
    async wordsSearch(keyWords) {
      this.value = keyWords || this.value;
      console.log("keyWords", this.value);
      // 点击搜索，重新开始分页
      this.pageNum = 1;
      this.finished = false;
      let res = await this.searchMusic();
      // console.log(res);
      this.resultList = res.data.result.songs ? res.data.result.songs : [];
    },
    // 触底加载数据的函数
    async loadResult() {
      this.pageNum++;
      let res = await this.searchMusic();
      if (res && res.data && res.data.result && res.data.result.songs) {
        this.resultList = [...this.resultList, ...res.data.result.songs];
      } else {
        // 没数据认为是加载完了
        this.finished = true;
      }
      this.loading = false;
    },
    /**
     * 输入框输入的时候，实时查询
     */
    inputFn: Debounce(async function () {
      if (!this.value) {
        this.resultList = [];
        return;
      }
      this.saveToStorage(this.value);
      this.wordsSearch();
    }, 1000),

    /**
     * 将搜索历史存入LocalStorage
     */
    saveToStorage(item) {
      // 最多存6个
      if (this.searchHis.length >= 6) {
        this.searchHis.shift();
      }
      this.searchHis.push(item.trim());
      const set = new Set(this.searchHis);
      localStorage.setItem("ser-his", JSON.stringify([...set]));
    },
    /**
     * 从缓存中获取历史记录
     */
    getHistoryFromStorage() {
      let arr = localStorage.getItem("ser-his");
      // console.log('arr',arr);
      arr = arr ? JSON.parse(arr) : [];
      return arr;
    },
  },
  async created() {
    // 热搜关键词初始化
    let res = await getHotWords();
    this.hotWords = res.data.result.hots;
    // let result = this.searchMusic();
    // 注意看这个神奇的效果。这里直接打印的话，因为方法 searchMusic 是异步的，所以直接打印，这里打出来的是Promise。而你在方法内的最后打印，打出来的是真实的结果。
    // 所以注意，这个result其实是个promise
    // console.log("result", result);
  },
};
</script>

<style scoped lang="scss">
.search-box,
.hot-name {
  margin: 0.266667rem 0;
  padding: 0 6px;
}
// 热门搜索标题
.hot-title {
  color: #666;
  font-size: 0.32rem;
  padding-left: 14px;
}
.hot-item {
  display: inline-block;
  height: 0.853333rem;
  line-height: 0.853333rem;
  font-size: 0.373333rem;
  color: #333;
  border: 1px solid #d3d4da;
  border-radius: 0.853333rem;
  padding: 0 0.373333rem;
  margin-right: 0.213333rem;
  margin-bottom: 0.213333rem;
}
</style>
